import "./ListPage.scss";
import { ReactComponentPage } from "../../class/ReactComponentPage";
import React from "react";
import { Button, Input, message, Modal} from "antd";
import { Link } from "react-router-dom";
import { BookAddPop } from "../../components/BookAddPop/BookAddPop";
import {
    BooksTable,
    BooksTableWithRouter
} from "../../components/BooksTable/BooksTable";
import {TableBookList} from "../../../common/class/TableBookList";
import tableBookList from "../../../common/function/tableBookList";
export namespace ListPage {
    export interface Props extends ReactComponentPage.Props {}
    export interface State extends ReactComponentPage.State {
        showPop: boolean;
        formData: Partial<TableBookList.Data>;
        filterString: string;
        searchInputValue: string;
    }
}

export class ListPage extends ReactComponentPage<ListPage.Props, ListPage.State> {
    public readonly state = {
        showPop: false,
        formData: {},
        filterString: "",
        searchInputValue: "",
    };
    protected componentTable: BooksTable;
    public render() {
        // @ts-ignore
        // @ts-ignore
        return (
            <div className={this.getClsName("list-page-component")}>
                <h3 className="page-title">书籍列表页面</h3>
                <div className="row first-row">
                    <Input.Search
                        value={this.state.searchInputValue}
                        placeholder="搜索:作者, 书名"
                        onSearch={this.updateFilterString.bind(this)}
                        onInput={(evt) => { this.updateSearchInputValue((evt.target as HTMLInputElement).value); }}
                        enterButton
                    />
                    <Button type="primary">
                        <Link to="/">返回首页</Link>
                    </Button>
                </div>
                <div className="row second-row text-right">
                    <Button type="danger" onClick={this.deleteSelected.bind(this)}>删除选中</Button>
                    <Button type="primary" onClick={this.openModal.bind(this)}>添加书目</Button>
                </div>
                <BooksTableWithRouter
                    onEdit={this.editRow.bind(this)}
                    filterString={this.state.filterString}
                    onClickAuthor={this.updateSearchInputValue.bind(this)}
                    wrappedComponentRef={(ref: BooksTable) => { this.componentTable = ref; }}
                />
                <BookAddPop
                    formData={this.state.formData}
                    showPop={this.state.showPop}
                    onCloseModal={this.closeModal.bind(this)}
                />
            </div>
        );
    }
    protected closeModal(state: BookAddPop.ModalCloseState) {
        // console.log(this, state);
        this.setState({
            showPop: false,
        }, () => {
            if (state === "okay") {
                this.componentTable.updateList();
            }
        });
    }
    protected openModal(evt: any, data?: Partial<TableBookList.Data>) {
        this.setState({
            showPop: true,
            formData: data ? data : {},
        });
    }
    protected editRow(data: Partial<TableBookList.Data>) {
        this.openModal(null, data);
    }
    protected updateFilterString(value: string) {
        this.setState({
            filterString: value && value.trim(),
        });
    }
    protected deleteSelected(evt: any) {
        const table = this.componentTable;
        if (table) {
            this.confirmToDelete()
                .then(() => {
                   table.deletedSelectedRows();
                }).catch(() => {
                    // do nothing;
                });
        }
    }
    protected confirmToDelete() {
        return new Promise((resolve, reject) => {
            Modal.confirm({
                title: "确认要删除这些书籍吗?",
                content: "确认要删除这些书籍吗",
                onOk() {
                    resolve();
                },
                onCancel() {
                    reject();
                },
            });
        });
    }
    protected updateSearchInputValue(referStr: string) {
        this.setState({
            searchInputValue: referStr,
        });
    }
}
